<template>
  <el-container>
    <!-- 左侧 -->
    <el-aside width="200px">
      <img class="img1" src="../assets/1.png" />

      <p class="imgTitle">欢迎使用云客系统</p>
    </el-aside>
    <!-- 右侧 -->
    <el-main>
      <div class="loginTitle">欢迎登录</div>
      <el-form ref="loginRefForm" :model="user" label-width="120" :rules="loginRules">
        <!-- 账号 -->
        <el-form-item label="账号" prop="LoginAct">
          <el-input v-model="user.LoginAct" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="LoginPwd">
          <el-input type="password" v-model="user.LoginPwd" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>

        <!-- 记住我 -->
        <el-form-item>
          <el-checkbox label="记住我" name="rememberMe" />
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent } from "vue";
import { doPost } from "../http/httpRequest.js";
import { messageTip } from "../util/util.js";
export default defineComponent({
  //组件的名字
  name: "Login",
  //定义页面使用的变量，定义初始值为空
  data() {
    return {
      //对象变量定义
      user: {},
      //字符串变量定义
      name: "",
      //数字变量定义
      age: 0,
      //数组变量定义
      arr: [],
      //集合，对象数组定义
      userList: [{}],
      //定义登录规则
      loginRules: {
        //账号登录规则，规则可以为多个，所以是数组
        LoginAct: [{ required: true, message: "请输入账户", trigger: "blur" }],
        //密码登录规则
        LoginPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "密码长度为6-16位", trigger: "blur" },
        ],
      },
    };
  },

  //定义函数，函数都写在methods里面
  methods: {
    //登录函数
    login() {
      //执行点击事件前，验证输入框的合法性
      this.$refs.loginRefForm.validate((isValid) => {
        if (isValid) {
          //定义security的接收的变量,用formData，他是kv结构
          let formData = new FormData();
          formData.append("loginAct", this.user.LoginAct);
          formData.append("loginPwd", this.user.LoginPwd);
          //执行点击事件
          doPost("api/login", formData).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              messageTip("登录成功","success")
            }else{
             messageTip("登录失败","error") 
            }
          });
        }
      });
    },
  },
});
</script>

<style scoped>
.el-aside {
  background-color: black;
  width: 40%;
  text-align: center;
  /* column:center; */
}
.el-main {
  /*百分百的高度，左跟右一致的高度 */
  height: calc(100vh);
}

.img1 {
  height: 400px;
}
.imgTitle {
  color: aliceblue;
  font-size: 28px;
  font-weight: bold;
}
.el-form {
  width: 60%;
  margin: auto;
}
.loginTitle {
  text-align: center;
  margin-top: 100px; /*上边距*/
  margin-bottom: 15px; /*下边距*/
}
.el-button {
  width: 100%;
}
</style>
